<template>
  <el-dialog v-model="applyDialogVisible" custom-class="party-fee-use-dialog" title="党费使用申请" width="550px" @close="handleClose">
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" label-width="80px">
      <el-row :gutter="20">

        <el-col :span="12">
          <el-form-item label="申请支部" prop="pbCommitteeId">
            <el-select v-model="form.pbCommitteeId" class="w-full" clearable placeholder="请选择支部">
              <el-option v-for="item in branchOptions" :key="item.id" :label="item.committeeName" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="申请日期" prop="applyTime">
            <el-date-picker v-model="form.applyTime" type="datetime" style="width: 100%"   value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">

        <el-col :span="12">
          <el-form-item label="计划使用金额" prop="applyMoney">
            <el-input v-model="form.applyMoney" class="w-full" placeholder="¥ 0.00" prefix-icon="el-icon-yen"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="预计使用时间" prop="estimateTime">
            <el-date-picker v-model="form.estimateTime" type="datetime" style="width: 100%"   value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期" />
          </el-form-item>
        </el-col>

      </el-row>

      <el-form-item label="申请事项" prop="applyRemarks">
        <el-input v-model="form.applyRemarks" class="w-full" placeholder="请详细说明党费使用用途" rows="3" type="textarea"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer flex justify-content-end">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm"><i class="el-icon-check mr-1"></i>提交申请</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import {ref, defineEmits, defineProps, watch} from 'vue'
import {ElMessage, ElNotification} from 'element-plus'
import {createPBFee, createPBFeeApply} from "@/api/cost/cost.js";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  branchOptions: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'confirm'])
const applyDialogVisible = ref(props.visible)
const formRef = ref(null)

const form = ref({
  pbCommitteeId: '', // 支部id
  applyTime: '', // 申请时间
  applyMoney: '', // 额度
  estimateTime: '', // 预计使用时间
  applyRemarks: '', // applyRemarks
})

const rules = ref({
  pbCommitteeId: [{required: true, message: '请选择申请支部', trigger: 'change'}],
  applyTime: [{required: true, message: '请选择申请日期', trigger: 'change'}],
  applyMoney: [
    {required: true, message: '请输入计划使用金额', trigger: 'blur'},
    {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '金额格式不正确，最多两位小数', trigger: 'blur'}
  ],
  estimateTime: [{required: true, message: '请选择预计使用时间', trigger: 'change'}],
})


// 监听 visible 变化，同步 applyDialogVisible
watch(() => props.visible, (val) => {
  applyDialogVisible.value = val
})

// 监听 applyDialogVisible 变化，向父组件传递事件
watch(applyDialogVisible, (val) => {
  emit('update:visible', val)
})

const handleClose = () => {
  applyDialogVisible.value = false
  formRef.value?.resetFields()
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let result = await createPBFeeApply(form.value);
      let data = result.data.data;
      if (result.status == 200 && result.data.code == 200) {
        emit('confirm', { ...form.value })
        handleClose()
        ElMessage.success('申请提交成功')
      } else {
        ElMessage({type: 'error', message: '缴费信息提交失败！'});
      }

      // handleClose()
    } else {
      ElMessage.error('请完善申请信息')
      return false
    }
  })
}

</script>

<style scoped>
.party-fee-use-dialog {
  --el-dialog-header-bg-color: #e52e2e;
  --el-dialog-header-text-color: #fff;
}

.upload-area {
  cursor: pointer;
}

.approval-step:last-child {
  border-bottom: none;
}

.step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-dot.completed {
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
}

.text-success {
  color: #67c23a;
}

.text-warning {
  color: #e6a23c;
}

.text-gray {
  color: #c0c4cc;
}
</style>
